<template>
    <div>
      <el-container>

        <el-header >
          <Header :homedata="homedata"></Header>
        </el-header>
        <el-container>
          <el-aside :width="homedata.leftwidth+'px'" :style="{height:height+'px',borderRight:'1px solid gray'}">
            <Left :homedata="homedata"></Left>
          </el-aside>
          <el-container>

            <el-main>
              <Content></Content>
            </el-main>

            <el-footer height="40px">
              <Footer></Footer>
            </el-footer>
          </el-container>
        </el-container>
      </el-container>
    </div>
</template>

<script>
import Left from "./Left"
import Footer from "./Footer"
import Header from "./Header"
import Content from "./Content"
    export default {
      components: {Header, Footer, Content, Left},
      data(){
        return{
          height:400,
          homedata:{
            isCollapse:false,
            leftwidth:200,

          }
        }

      },
      mounted(){
        this.height = document.documentElement.clientHeight - 70;
        var that = this;
        window.onresize = function () {
          that.height = document.documentElement.clientHeight - 70;
        }
      }

    }
</script>

<style scoped>
  .el-header{
    background:#409EFF ;
    padding: 0;
  }



</style>
